<template>
  <view class="chatlaout">
    <uniHeader :url='imgUrl + userData.user?.img' @userInfo="userInfo">
      <template v-slot:mid>
        <view class="name-status">
          <view class="name">
            {{ userName }}
          </view>
          <view class="status">
            <view class="online"></view>
            <view class="describe">在线</view>
          </view>
        </view>
      </template>
    </uniHeader>
    <view class="chat">
      <view class="chat-center">
        <scroll-view class="scrollView" :scroll-y="true" refresher-enabled @refresherrefresh="onPull"
          :refresher-triggered="pullDownRefresh" :show-scrollbar="false">
          <view class="scroll-view-item" @click="to(item)" v-for="item in msgList" :key="item.targetID">
            <uniMove>
              <template v-slot:show>
                <view class="move">
                  <view class="item_img">
                    <image :src="item.img" mode="widthFix" />
                  </view>
                  <view class="item_right">
                    <view class="item_name_time">
                      <view class="name">{{ item.targetname }}</view>
                      <view class="time">{{ parseTimestamp(+item.time) }}</view>
                    </view>
                    <view class="item_msg_unread">
                      <view class="msg">
                        {{ item.last_message }}
                      </view>
                      <view class="unread" :style="[item.unreadmsg == 0 ? 'display:none' : '']">
                        {{ item.unreadmsg }}
                      </view>
                    </view>
                  </view>
                </view>
              </template>
              <template v-slot:hide>
                <view class="hide">
                  <view class="item_del" @click.stop="del(1)">
                    删除
                  </view>
                </view>
              </template>
            </uniMove>
          </view>
          <view class="bottom" :style="msgList.length > 3 ? '' : 'height:50vh;'">
            <image src="../../static/svg/zwxx.svg" mode="widthFix" class="img" v-if="msgList.length == 0" />
            <view class="text" v-if="msgList.length == 0">{{ msgList.length == 0 ? '暂无消息' : '' }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import uniHeader from "@/components/uni-header/uni-header.vue"
import uniMove from "@/components/uni-move/uni-move.vue"
import { parseTimestamp } from "@/utils/common.js"
import { onHide, onLoad, onPullDownRefresh, onReady, onShow, onUnload } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { useUserStore } from "../../store/modules/user"
import { getFriendList } from "../../api/chatList"
import { FG } from "../../api/req.js"
let userName = ref("")
let userData = useUserStore()
let msgList = reactive([])
let imgUrl = `${FG.baseUrl}/static/`
let pullDownRefresh = ref(false) //控制下拉刷新属性

let timer = null


function userInfo() {
  console.log(userData.user._id, 25);
  uni.navigateTo({ url: `/pages/user/user?userId=${userData.user._id}&friendStatus=200` })
}

function onPull() {
  pullDownRefresh.value = true
  setTimeout(() => {
    onPullHandle()
  }, 1000)
}

async function onPullHandle() {
  let back = await getPageData()
  switch (back) {
    case true: {
      uni.showToast({ title: '刷新成功', icon: 'success', duration: 500 })
      pullDownRefresh.value = false
      break
    }
    case false: {
      uni.showToast({ title: '刷新失败', icon: 'error', duration: 500 })
      pullDownRefresh.value = false
      break
    }
  }
}

function del(num) {
  console.log(num);
}

function to(data) {
  uni.navigateTo({ url: `/pages/chat/chat?my=${data.myID}&target=${data.targetID}&remark=${data.targetname}` })
}

async function getPageData() {
  try {
    let res = await getFriendList({ uid: userData.user._id })
    msgList.splice(0, msgList.length)
    if (res.status == 200) {
      for (let item of res.data) {
        item.img = `${imgUrl}${item.img}`
        if (item.type == 1) {
          item.last_message = '[图片]'
        } else if (item.type == 3) {
          item.last_message = '[文件]'
        }
        msgList.push(item)
      }
      return true
    } else {
      return false
    }
  } catch (e) {
    return false
  }
}
onLoad(() => {
  uni.setNavigationBarTitle({ title: '聊天列表' })
  if (!userData.user) {
    let user = uni.getStorageSync('user')
    if (user) {
      userData.user = user
    } else {
      uni.navigateTo({ url: '/pages/login/login' })
    }
  }
  timer = setInterval(async () => {
    getPageData()
  }, 2000)
})
onShow(() => {
  let user = uni.getStorageSync('user')
  userData.user = user
  userName.value = user.nickname
  getPageData()
})

onUnload(() => {
  clearInterval(timer)
})




</script>

<style lang="scss" scoped>
.chatlaout {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;

  .name-status {
    margin-left: 20rpx;
    height: 90%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    .name {
      font-size: 28rpx;
    }

    .status {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;

      .online {
        width: 15rpx;
        height: 15rpx;
        border-radius: 50%;
        background-color: greenyellow;
        margin-right: 10rpx;
      }


      .describe {
        font-size: 20rpx;
      }
    }
  }

  .chat {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(100vh - 100rpx);
    padding-top: 100rpx;

    .chat-center {
      width: 100%;
      max-height: 100vh;
      overflow: hidden;

      .scrollView {
        width: 100%;
        min-height: 50vh;
        max-height: calc(100vh - 100rpx);
        // padding-bottom: 50px;

        .bottom {
          width: 100%;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .img {
            width: 300rpx;
            margin-bottom: 20rpx;
          }

          .text {
            color: #999;
          }
        }

        .scroll-view-item {
          width: 100%;
          height: 130rpx;

          .move {
            padding: 10rpx 20rpx;
            display: flex;
            background-color: transparent;
            height: 100%;

            .item_img {
              height: 100%;
              width: 100rpx;

              image {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
              }
            }

            .item_right {
              margin-left: 20rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              width: calc(100% - 100rpx);

              .item_name_time {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 20rpx;

                .name {
                  font-size: 32rpx;
                  flex: 1;
                  text-wrap: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 60%;
                }

                .time {
                  font-size: 24rpx;
                  color: #999;
                }
              }

              .item_msg_unread {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 20rpx;

                .msg {
                  font-size: 24rpx;
                  color: #999;
                  flex: 1;
                  text-wrap: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 80%;
                }

                .unread {
                  width: 30rpx;
                  height: 30rpx;
                  text-align: center;
                  font-size: 16rpx;
                  border-radius: 50%;
                  background-color: red;
                  color: #fff;
                  padding: 5rpx;
                }
              }
            }

          }

          .move:active {
            background-color: #eee;
          }

          .hide {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;

            .item_del {
              padding: 0 20rpx;
              width: 150rpx;
              height: 100%;
              text-align: center;
              line-height: calc(130rpx);
              background-color: red;
            }
          }
        }
      }

      .chat-header-item {
        width: 100%;
        height: 150vh;
      }
    }
  }

  .item {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
  }

  .item-content {
    flex: 1;
  }

  .item-action {
    background-color: #eee;
    padding: 20px;
  }

  .item-text {
    padding: 10px;
    border-radius: 5px;
  }

}
</style>